<template>
  <div class="scan-container">
    <div class="page-header">
      <div class="header-content">
        <h2>漏洞扫描</h2>
        <p>执行系统漏洞扫描和安全检测</p>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="startScan" :loading="scanning">
          开始扫描
        </el-button>
      </div>
    </div>

    <div class="scan-wrapper">
      <el-card title="扫描配置">
        <el-form :model="scanForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="扫描目标">
                <el-input v-model="scanForm.target" placeholder="请输入IP地址或域名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="扫描类型">
                <el-select v-model="scanForm.type" placeholder="请选择扫描类型">
                  <el-option label="快速扫描" value="quick" />
                  <el-option label="全面扫描" value="full" />
                  <el-option label="自定义扫描" value="custom" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="端口范围">
            <el-input v-model="scanForm.ports" placeholder="例如: 1-1000 或 80,443,8080" />
          </el-form-item>
          
          <el-form-item label="扫描选项">
            <el-checkbox-group v-model="scanForm.options">
              <el-checkbox label="port">端口扫描</el-checkbox>
              <el-checkbox label="service">服务识别</el-checkbox>
              <el-checkbox label="os">操作系统检测</el-checkbox>
              <el-checkbox label="vuln">漏洞检测</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card title="扫描结果" v-if="scanResults.length > 0">
        <div class="scan-progress" v-if="scanning">
          <el-progress :percentage="scanProgress" :stroke-width="20" />
          <p>正在扫描中，请稍候...</p>
        </div>
        
        <el-table :data="scanResults" stripe border v-else>
          <el-table-column prop="host" label="主机" width="150" />
          <el-table-column prop="port" label="端口" width="100" />
          <el-table-column prop="service" label="服务" width="120" />
          <el-table-column prop="vulnerability" label="漏洞" />
          <el-table-column prop="severity" label="严重程度" width="120">
            <template #default="{ row }">
              <el-tag :type="getSeverityTagType(row.severity)">
                {{ row.severity }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 响应式数据
const scanning = ref(false)
const scanProgress = ref(0)
const scanResults = ref([])

// 表单数据
const scanForm = reactive({
  target: '',
  type: 'quick',
  ports: '1-1000',
  options: ['port', 'service']
})

// 方法
const startScan = async () => {
  if (!scanForm.target) {
    ElMessage.warning('请输入扫描目标')
    return
  }

  scanning.value = true
  scanProgress.value = 0
  scanResults.value = []

  // 模拟扫描过程
  const interval = setInterval(() => {
    scanProgress.value += 10
    if (scanProgress.value >= 100) {
      clearInterval(interval)
      scanning.value = false
      
      // 模拟扫描结果
      scanResults.value = [
        {
          host: scanForm.target,
          port: '80',
          service: 'HTTP',
          vulnerability: 'HTTP版本过低',
          severity: '中危'
        },
        {
          host: scanForm.target,
          port: '22',
          service: 'SSH',
          vulnerability: 'SSH弱密码',
          severity: '高危'
        }
      ]
      
      ElMessage.success('扫描完成')
    }
  }, 300)
}

const goBack = () => {
  router.push('/vulnerability/list')
}

const getSeverityTagType = (severity) => {
  const tagMap = {
    '严重': 'danger',
    '高危': 'danger',
    '中危': 'warning',
    '低危': 'info'
  }
  return tagMap[severity] || 'info'
}
</script>

<style lang="scss" scoped>
.scan-container {
  padding: 20px;
  background-color: var(--bg-color);
}


  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.scan-wrapper {
  .el-card {
    margin-bottom: 20px;
  }
}

.scan-progress {
  text-align: center;
  padding: 40px;
  
  p {
    margin-top: 20px;
    color: var(--text-color-secondary);
  }
}
</style> 